<template>
  <a-drawer
      title="结转详情"
      :maskClosable="true"
      :visible="visible"
      :width="1000"
      @close="closeModal"
      :destroyOnClose="true"
  >
    <a-row type="flex" justify="end">
      <a-col>
        <a-space>
          <a-button v-if="approval_id" type="primary" ghost @click.stop="ViewApproval">查看审批
          </a-button>
          <a-button v-if="status == 2" danger @click.stop="handleVoid">作废</a-button>
        </a-space>
      </a-col>
    </a-row>
    <a-row class="mt-10" :gutter="[12, 12]">
      <a-col :span="24">
        <CarryOverDetailTable
            dataType="out"
            :dataSource="outData"
        />
      </a-col>
      <a-col :span="24">
        <CarryOverDetailTable
            dataType="into"
            :dataSource="intoData"
        />
      </a-col>

      <a-col :span="24">
        <attachment-info
            :active="true"
            :params="attachParams"
            :showOption="false"
            :object="false"
        />
      </a-col>
    </a-row>

    <!--  作废结转  -->
    <VoidCarryOverModal
        :visible="voidVisible"
        :id="id"
        @handleSuccess="handleVoidOk"
        @handleClose="handleVoidCancel"
    />

  </a-drawer>
</template>

<script>
import {defineComponent, watch, reactive, toRefs, computed, ref} from "vue";
import store from "../../../../store";
import moment from "moment";
import {message} from "ant-design-vue";
import CarryOverDetailTable from "@/views/bill/BillDetail/modules/CarryOverDetailTable.vue";
import request from "@/common/utils/request";
import VoidCarryOverModal from "@/views/bill/BillDetail/modules/VoidCarryOverModal.vue";
import utils from "@/common/utils/utils";
import NoHistoryIframe from "@/views/contract/ContractDetail/modules/NoHistoryIframe.vue";
import AttachmentInfo from "@/components/contract/AttachmentInfo/index.vue";

export default defineComponent({
  name: "CarryOverDetail",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,  // 结转列表id
    },
  },
  components: {
    AttachmentInfo,
    NoHistoryIframe,
    CarryOverDetailTable,
    VoidCarryOverModal,
  },
  setup(props, {emit}) {


    const closeModal = () => {
      emit("handleCancel");
    };


    const state = reactive({
      outData: [],
      intoData: [],
      status: null,
      id: 0,
      voidVisible: false,
      approval_id: '',
      attachParams: {
        type: 1,
        object_id: '',
      },
    });

    const getDetail = () => {
      request.get('/org', "/billTransfer/billTransferDetail", {transfer_id: props.id}).then((res) => {
        state.status = res?.list?.status;
        state.id = res?.list?.id;
        state.attachParams.object_id = res?.list?.object_id;
        state.approval_id = res?.list?.approval_id || '';
        state.intoData = res?.list?.transfer_into || [];
        state.outData = res?.list?.transfer_out || [];
      }).finally(() => {
      })
    };

    const handleVoid = () => {
      state.voidVisible = true;
    };

    const handleVoidCancel = () => {
      state.voidVisible = false;
    };

    const handleVoidOk = () => {
      handleVoidCancel();
      init();
      emit("handleRefresh");
    };

    const init = () => {
      getDetail();
    };

    const reset = () => {
      state.outData = [];
      state.intoData = [];
      state.status = null;
      state.id = 0;
    };

    const ViewApproval = () => {
      if (window.__MICRO_APP_ENVIRONMENT__) {

        window.microApp.forceDispatch({
          type: "SetChildDrawerList",
          info: {
            props: {
              title: '审批详情',
              closable: true,
              maskClosable: true,
              visible: true,
              width: 1000,
              bodyStyle: {
                height: '100%',
                boxSizing: 'border-box',
                overflowY: 'auto',
                background: '#ffffff'
              },
              destroyOnClose: true,
            },
            microId: `approvalDetailMessage`,
            app: 'workApproval',
            url: `/approval/detail?id=${state.approval_id}`,
            params: {
              isMainDrawer: true,
              closeApproval: () => {
                init()
              }
            }
          }
        })
      }

    };


    watch(
        () => props.visible,
        (visible) => {
          if (visible) {
            init();
          } else {
            reset();
          }
        }
    );
    return {
      ...toRefs(state),
      closeModal,
      handleVoid,
      handleVoidCancel,
      handleVoidOk,
      ViewApproval,
    };
  },
});
</script>
